"use client"
import React from "react";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Checkbox, Form, Input, Flex ,Card} from "antd";
import '../globals.css'
import { useRouter } from "next/navigation";

const Login = (props:any) => {

  const router = useRouter()

  const onFinish = (values: any) => {
    console.log("Received values of form: ", values);
    localStorage.setItem('token',values.username)
    router.push('/')
  };

  return (
    <div className="bigBox">
      <Card
      title="登录页面"
      style={{ width: '400px',margin:'200px auto' }}
    >
      <Form
        name="login"
        initialValues={{ remember: true }}
        style={{ maxWidth: 360 }}
        onFinish={onFinish}
      >
        <Form.Item
          name="username"
          rules={[{ required: true, message: "Please input your Username!" }]}
        >
          <Input prefix={<UserOutlined />} placeholder="Username" />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[{ required: true, message: "Please input your Password!" }]}
        >
          <Input
            prefix={<LockOutlined />}
            type="password"
            placeholder="Password"
          />
        </Form.Item>

        <Form.Item>
          <Button block type="primary" htmlType="submit">
            Log in
          </Button>
        </Form.Item>
      </Form>
    </Card>
    </div>
  );
};

export default Login;
